<template>
  <div class="home">
    <!--<img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <!--<button @click="toAbout">about</button>
    <button @click="toMine">Mine</button>-->
    
    <div class="homeNav">
    	<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;广州</div>
    	
    	<div class="search">搜索?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
    	
    	<div class="link">
    		<router-link to="/home/playing" class="my">正在上映</router-link>
    		<router-link to="/home/comming" class="my">即将上映</router-link>
    		
    	</div>
    
    				<p class="clear"></p> <!--清除浮动-->
    	
    </div>
    
    
    <!-- home下的子路由 children-->
    <router-view/>
        
  </div>
</template>

<style lang="scss">
		.homeNav{
			line-height: 44px;font-size: 15px;
			width:100%;height: 44px;
			div:nth-of-type(1){float: left;color: grey;font-weight:600;}
			div:nth-of-type(2){float: right;color: grey;font-weight:600;}
			}
			.link{
				float: none;
				display: block;
				width: calc(60% - 40px);
				margin: 0 auto;
				.my{
					display: inline-block;
					width:50%; color:grey;font-weight: bold;
				}
				
				
				.router-link-active,.router-link-exact-active {
			      color:cornflowerblue;
			      border-bottom: 2px solid cornflowerblue;
			  }
			  
			
			}
			.search{
				float: right;
			}
</style>

<script>
// @ is an alias to /src

//import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  
  methods:{
  				// 修改图片尺寸
  				picFix(url){
  				 return	url.replace('w.h','128.180')
  				},
  				
  
  	// 课堂笔记
  	toAbout(){
			//console.log( this ); 当前的组件
			//路由对象的方法  push就是跳转
			//query 查询字符串的参数   /about?id=4396&name=777
			this.$router.push({path:'/about',query:{id:4396,name:777}  })

			/////跳转命名路由		传参使用params		 /about		(url)	/////////
			//	this.$router.push(																		/
			//		{																										/
			//			name:'about',																			/
			//		  params:{																					/
			//		  	id:4399																					/
			//		  }																									/
			//		}																										/
			//		)																										/
  		///////////////////////////////////////////////////////////
 },
 toMine(){
 	// 跳转 动态路由 /mine/userId			userId=1234
// 	this.$router.push({path:'/mine/1234'})
 	
 	this.$router.push({name:'mine',params:{userId:4444}})
 }
},  
  components: {
//  HelloWorld
  },
 

}
</script>
